<template>
  <el-card class="content">
    <div slot="header" class="clearfix">
      <span>兼职任务管理</span>
    </div>
    <div style="margin-bottom: 20px">
      <el-button type="primary" @click="addEvent()">添加任务</el-button>
      <el-input v-model="searchParam.title" placeholder="请输入标题" style="width: 30%;margin-left: 10px;margin-right: 10px;"></el-input>
      <el-input v-model="searchParam.content" placeholder="请输入内容" style="width: 30%;margin-left: 10px;margin-right: 10px;"></el-input>
      <el-button type="primary" @click="getJob">查找</el-button>
    </div>
    <el-table
        :data="tableValue"
        border>
      <el-table-column
          prop="id"
          label="id"
      >
      </el-table-column>
      <el-table-column
          prop="title"
          label="标题"
      >
      </el-table-column>
      <el-table-column
          prop="img"
          label="展示">
        <template slot-scope="scope">
            <img :src="scope.row.img" style="width: 60px;height: 60px"/>
        </template>
      </el-table-column>
      <el-table-column
          prop="content"
          label="内容">
      </el-table-column>
      <el-table-column
          prop="classify.name"
          label="分类">
      </el-table-column>
      <el-table-column
          prop="price"
          label="报酬（￥）">
      </el-table-column>
      <el-table-column
          prop="phone"
          label="联系方式">
      </el-table-column>
      <el-table-column
          prop="startTime"
          label="开始时间">
      </el-table-column>
      <el-table-column
          prop="endTime"
          label="结束时间">
      </el-table-column>
      <el-table-column
          prop="createTime"
          label="创建时间">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="handleUpdate(scope.row)">编辑</el-button>
          <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block" style="margin-top: 20px">
      <el-pagination
          :page-size="this.searchParam.pageSize"
          :current-page="this.searchParam.pageNum"
          layout="prev, pager, next"
          :total="this.total"
          @current-change="handleCurrentChange"
      ></el-pagination>
    </div>

    <el-dialog
        title="添加任务"
        :visible.sync="addFormDialogVisible"
        width="30%"
        center>
      <el-form label-position="left" label-width="80px" :model="newJob">
        <el-form-item label="标题">
          <el-input v-model="newJob.title"></el-input>
        </el-form-item>
        <el-form-item label="兼职类型">
          <el-select v-model="newJob.cid" placeholder="请选择">
            <el-option
                v-for="item in this.classifyValue"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="图片">
          <el-upload
              class="upload-demo"
              drag
              :action="this.$store.state.uploadUrl"
              :on-success="upload"
              limit="1"
              multiple>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="内容">
          <el-input v-model="newJob.content"></el-input>
        </el-form-item>
        <el-form-item label="报酬">
          <el-input v-model="newJob.price"></el-input>
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model="newJob.phone"></el-input>
        </el-form-item>
        <el-form-item label="时间信息">
          <el-date-picker
              v-model="newJob.time"
              type="datetimerange"
              format="yyyy-MM-dd HH:mm:ss"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <el-button @click="addFormDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="addJob">确 定</el-button>
    </el-dialog>

    <el-dialog
        title="更新任务信息"
        :visible.sync="updateFormDialogVisible"
        width="40%"
        center>
      <el-form label-position="left" label-width="80px" :model="updJob">
        <el-form-item label="标题">
          <el-input v-model="updJob.title"></el-input>
        </el-form-item>
        <el-form-item label="兼职类型">
          <el-select v-model="updJob.cid" placeholder="请选择" @change="handleIsopenSelect">
            <el-option
                v-for="item in this.classifyValue"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="图片">
          <el-upload
              class="upload-demo"
              drag
              :action="this.$store.state.uploadUrl"
              :on-success="upload"
              limit="1"
              multiple>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="内容">
          <el-input v-model="updJob.content"></el-input>
        </el-form-item>
        <el-form-item label="报酬">
          <el-input v-model="updJob.price"></el-input>
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model="updJob.phone"></el-input>
        </el-form-item>
        <el-form-item label="时间信息">
          <el-date-picker
              v-model="updJob.time"
              type="datetimerange"
              format="yyyy-MM-dd HH:mm:ss"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="招聘状态">
          <el-radio-group v-model="updJob.status">
            <el-radio :label="false">招满</el-radio>
            <el-radio :label="true">未招满</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <el-button @click="updateFormDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="updateJob">确 定</el-button>
    </el-dialog>
  </el-card>
</template>

<script>
import {jobAdd, jobDelete, jobSearch, jobUpdate} from "@/api/jobApi";
import {getAllClassify} from "@/api/classifyApi";

export default {
  name: "JobInfo",
  data(){
    return{
      tableValue:[],
      total:0,
      searchParam:{
        pageNum:1,
        pageSize:5,
        title:'',
        content:''
      },
      newJob:{time:[],img: '',title: '',cid:'',content: '',price:'',phone:'',startTime:'',endTime:'',createTime:''},
      updJob:{time:[],img: '',title: '',cid:'',content: '',price:'',phone:'',startTime:'',endTime:'',status:''},
      addFormDialogVisible:false,
      updateFormDialogVisible:false,
      img:"",
      classifyValue:[]
    }
  },
  methods:{
    getJob(){
      jobSearch(this.searchParam).then(res=>{
        if (res.code===200){
          this.tableValue=res.data.records;
          this.total=res.data.total;
        }
      })
    },
    addJob(){
      this.newJob.img=this.img;
      this.newJob.createTime=this.tranTime('yyyy-MM-dd hh:mm:ss',new Date());
      this.newJob.startTime=this.tranTime('yyyy-MM-dd hh:mm:ss',this.newJob.time[0]);
      this.newJob.endTime=this.tranTime('yyyy-MM-dd hh:mm:ss',this.newJob.time[1]);
      jobAdd(this.newJob).then(res=>{
        if (res.code===200){
            this.getJob();
            this.addFormDialogVisible=false;
            this.newJob={};
        }
      })
    },
    handleUpdate(job){
      console.log(job)
      this.updJob=job;
      this.img=job.img;
      this.updJob.cid=job.classify.id;
      this.updJob.time=[new Date(job.startTime),new Date(job.endTime)]
      console.log(this.updJob)
      this.updateFormDialogVisible=true;
    },
    handleDelete(id){
      jobDelete(id).then(res=>{
        if (res.code===200){
          this.getJob();
          this.updateFormDialogVisible=false;
        }
      })
    },
    updateJob(){
      this.updJob.img=this.img;
      this.updJob.startTime=this.tranTime('yyyy-MM-dd hh:mm:ss',this.updJob.time[0]);
      this.updJob.endTime=this.tranTime('yyyy-MM-dd hh:mm:ss',this.updJob.time[1]);
      jobUpdate(this.updJob).then(res=>{
        if (res.code===200){
          this.getJob();
          this.updateFormDialogVisible=false;
        }
      })
    },
    upload(res, file, fileList){
        this.img=res.data;
    },
    handleCurrentChange(val) {
      this.searchParam.pageNum=val;
      this.getJob();
    },
    handleIsopenSelect() {
      this.$forceUpdate()
    },
    addEvent(){
      this.newJob={};
      this.addFormDialogVisible=true;
    }
  },
  mounted() {
    this.getJob();
    getAllClassify().then(res=>{
      if (res.code===200){
        this.classifyValue=res.data;
      }
    })
  }
}
</script>

<style scoped>

</style>
